<template>
	<view class="sideBox">
		<!-- 头部 -->
		<view class="header">
			<text>新鲜事</text>
			<navigator
			url="../release/release"
			 hover-class="navigator-hover">
				<image src="../../static/img/jia.png" mode=""></image>
			</navigator>
			
		</view>
		<!-- 全部内容 -->
		<view class="content">
			<!-- 第一列 -->
			<view class="con1"  v-for="(item, index) in list" v-key="index">
				<!-- 上面的头像信息 -->
				<view class="con1_1">
					<view class="con1_1_1">
						<navigator url="" hover-class="navigator-hover" class="href1">
							<image :src="item.avatarurl"></image>
							<text>{{item.username}}</text>
						</navigator>
					</view>
					
					<text class="con1_1_2">{{time(item.create_time)}}</text>
				</view>
				<!-- 下面发布的新鲜事内容信息 -->
				<navigator url="" hover-class="navigator-hover" class="href2">
					<view class="con1_2">
						<text>{{item.title}}</text>
						<view class="image1" v-for="(v,index) in item.imagesList" :key="index">
							<image :src="v.img_url"></image>
						</view>
					</view>
				</navigator>
			</view>
			
		</view>
	</view>
	
</template>

<script>
	export default {
		data(){
			return {
				list:[]
			}
		},
		methods:{
			time(t){
				return this.$date(new Date(t));	
				
			}
		},
		onLoad(){
			
			this.$http({
				url:'/newthing/findAllNewThing'
			}).then((res)=>{
				console.log(res)
				this.list=res.data.data;
				// this.create_time=this.$date(new Date(res.data.data.create_time))
			}).catch((err)=>{
				console.log(err);
			})
		},
	}
</script>

<style lang="less" scoped>
.sideBox {
	width: 750rpx;
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		font-size: 44rpx;
		font-weight: 600;
		padding-top: 40rpx;
		text:nth-child(1) {
			font-family: 'Gill';
			margin-left: 30rpx;
			margin-bottom: 60rpx;
		}
		navigator{
				margin-right: 30rpx;
				margin-bottom: 70rpx;
			image{
				width:45rpx;
				height:45rpx;
			}
		}	
	};
	.content {
		width: 695rpx;
		margin: 0 auto;
		.con1 {
			padding: 20rpx 30rpxs;
			.con1_1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.con1_1_1 {
					navigator {
						display: flex;
						align-items: center;
						image {
							border-radius: 45rpx;
							width: 80rpx;
							height: 80rpx;
						}
						text {
							font-weight: 600;
							padding-left: 20rpx;
						}
					}
					
				};
				.con1_1_2 {
					font-size: 32rpx;
					color: #878787;
				}
				
			};
			.con1_2 {
				display: flex;
				flex-wrap: wrap;
				
				margin-left: 80rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid #eee;
				text{
					color: #000;
					width: 750rpx;
					font-size: 32rpx;
					padding-left: 20rpx;
					padding-top: 10rpx;
				};
				.image1{
					width: 190rpx;
					height: 190rpx;
					border-radius: 12rpx;
					overflow: hidden;
					image{
						margin: 0 5rpx;
						width: 190rpx;
						height: 190rpx;
					}
				}
				
			}
		}
	};
}

</style>
